<template>
    <he-popup mode="bottom" v-model="showModal" :borderRadius="16">
        <view class="detail-shipping-address flex flex-direction" :data-theme="theme">
            <view class="he-header">
                <text class="he-header__title">配送至</text>
                <text class="iconfont iconpopup_close fr" @click="showModal = false"></text>
            </view>
            <view class="he-body flex-sub">
                <scroll-view class="he-body__scroll" scroll-y>
                    <view class="he-item flex" v-for="(item, index) in list" :key="index" @click="setSelect(item)">
                        <view class="he-item__select flex justify-center align-center">
                            <text class="iconfont iconbtn_select" v-if="item.is_select"></text>
                        </view>
                        <view class="flex-sub flex flex-direction justify-center">
                            <view class="he-item__address">
                                {{ item.province }}{{ item.city }}{{ item.district
                                }}{{ item.address }}
                            </view>
                            <view class="he-item__info">{{ item.name }} {{ item.mobile }}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="he-footer">
                <button class="cu-btn" @click="newValue = true">选择其他地区</button>
            </view>
        </view>
    </he-popup>
</template>
<script>
import hePopup from "../../../components/he-popup.vue";
import { mapActions, mapGetters } from "vuex";

export default {
    name: "detail-shipping-address",
    components: {
        hePopup,
    },
    props: {
        value: {
            type: Boolean,
        },
        select: {
            type: Object,
            default: function() {
                return {
                    province: "",
                    city: "",
                    district: "",
                };
            },
        },
        isAddress: {
            type: Boolean,
            default: function() {
                return false;
            },
        },
    },
    computed: {
        ...mapGetters("user", {
            list: "getAddress",
        }),
        showModal: {
            get: function() {
                return this.value;
            },
            set: function(val) {
                this.$emit("input", val);
            },
        },
        newValue: {
            get: function() {
                return this.isAddress;
            },
            set: function(val) {
                this.showModal = false;
                this.$emit("update:isAddress", val);
            },
        },
    },
    methods: {
        ...mapActions({
            getAddress: "user/getAddress",
        }),
        setSelect: function(item) {
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].is_select = false;
            }
            item.is_select = true;
            this.$emit("select", item);
            this.showModal = false;
        },
    },
    mounted: function mounted() {
        if (this.isLogin) this.getAddress();
    },
    beforeDestroy() {
        for (let i = 0; i < this.list.length; i++) {
            this.list[i].is_select = false;
        }
    },
};
</script>
<style scoped lang="scss">
.detail-shipping-address {
    height: 63vh;
}

.he-header {
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin-top: 16px;
    padding: 0 32px;
}

.iconpopup_close {
    font-size: 28px;
    width: 28px;
    height: 28px;
    line-height: 1;
    color: #9d9d9d;
    margin-top: 18px;
}

.he-header__title {
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.he-body {
    margin-top: 32px;
    margin-bottom: 32px;
}

.he-body__scroll {
    height: calc(63vh - 256px);
}

.he-footer {
    height: 120px;
    padding: 0 32px;
}

.cu-btn {
    margin: 20px 0;
    height: 80px;
    width: 686px;
    border-width: 1px;
    border-style: solid;
    @include border_color("border_color");
    background: #ffffff;
    border-radius: 40px;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
    padding: 0;
    @include font_color("font_color");
}

.he-item {
    width: 750px;
    margin-bottom: 36px;
}

.he-item__select {
    width: 97px;
}

.iconbtn_select {
    font-size: 32px;
    @include font_color("font_color");
}

.he-item__address {
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding-right: 56px;
}

.he-item__info {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}
</style>